<template>
	<!-- #ifdef MP-WEIXIN -->
	<view class="flex" :style="{width:radius+'rpx',height:radius+'rpx'}">
		<canvas type="2d" style="width: 100%;height:100%;background: #fff;border-radius: 50%;" id="countDown"
			canvas-id="countDown"></canvas>
		<cover-image
			style="width:60%;height:60%;display: block;padding: 20%; position: absolute;top:0;right:0;overflow: hidden;border-radius: 50%;"
			src="https://front.zhaocaiami.vworld365.com/disanfang/img/logo1.png"></cover-image>
		<view class="second">
			<view class="txt">累计{{moneys/100}}元</view>
			<view class="txt">(0.3元起发)</view>
		</view>
		<!-- <cover-view class="second">累计{{moneys/100}}元</cover-view> -->
	</view>
	<!-- #endif -->
	
	<!-- #ifdef MP-ALIPAY || MP-TOUTIAO -->
	<view class="flex" :style="{width:radius+'rpx',height:radius+'rpx'}"
		style="position: fixed;top: 30upx;right: 30upx;z-index: 999;">
		<canvas style="width: 100%;height:100%;background: #fff;border-radius: 50%;" id="countDownCanvas"
			canvas-id="countDownCanvas"></canvas>
		<!-- <cover-image
			style="width:60%;height:60%;display: block;padding: 20%; position: absolute;top:0;right:0;overflow: hidden;border-radius: 50%;"
			src="https://front.zhaocaiami.vworld365.com/disanfang/img/logo1.png"></cover-image> -->
		<view class="count-num">
				{{time}}
			</view>
		<view class="second">
			<view class="txt">累计{{moneys/100}}元</view>
			<view class="txt">(0.3元起发)</view>
		</view>
	</view>
	<!-- #endif -->

	</view>
</template>
<script>
	export default {
		props: {
			radius: {
				type: Number,
				default: 100
			},
			second: {
				type: Number,
				default: 10
			},
			moneys: {
				type: Number,
				default: 1000
			},
			fontSize: {
				type: Number,
				default: 30
			},
			color: {
				type: String,
				default: '#0A84FF'
			},
			bgcolor: {
				type: String,
				default: '#f2f2f2'
			},
			lineWidth: {
				type: Number,
				default: 5
			},
			time: {
				type: Number,
				default: 10
			}
		},
		data() {
			return {
				second1: this.second,
				second_copy: this.second,
				index: 1,
				times: null,
				time1: null,
				index1: 1,
				millisecond: null,
				process: null,
				pauseStatus: false,
				ctx: null,
				center: 0
			}
		},
		created() {
			this.millisecond = this.second1 * 5
			this.process = 1 / this.millisecond
		},

		methods: {
			// #ifdef MP-WEIXIN
			init() {
				return new Promise((resolve, reject) => {
					let that = this
					const query = this.createSelectorQuery()
					query.select('#countDown')
						.fields({
							node: true,
							size: true
						})
						.exec((res) => {
							const canvas = res[0].node
							const ctx = canvas.getContext('2d')
							ctx.rotate(-90 * Math.PI / 180)
							let height = res[0].height
							let width = res[0].width
							let center = parseInt(width / 2)
							that.center = center
							const dpr = wx.getSystemInfoSync().pixelRatio
							canvas.width = res[0].width * dpr
							canvas.height = res[0].height * dpr
							// ctx.fillRect(0,0,canvas.width,canvas.height)
							ctx.scale(dpr, dpr)
							that.ctx = ctx
							resolve('123')
						})
				})
			},
			// #endif
			
			// #ifdef MP-ALIPAY || MP-TOUTIAO
			init() {
				return new Promise((resolve, reject) => {
					let that = this
					let query = uni.createSelectorQuery()
					query.select('#countDownCanvas')
						.boundingClientRect(res => {
							console.log('boundingClientRect data:', res)
							const ctx = uni.createCanvasContext('countDownCanvas', this)
							let height = res.height
							let width = res.width
							let center = parseInt(width / 2)
							this.center = center
							const dpr = uni.getSystemInfoSync().pixelRatio
							// ctx.scale(dpr/2, dpr/2) 
							this.ctx = ctx
							resolve('123')
						})
						.exec();
				})
			},
			// #endif
			
			// #ifdef MP-WEIXIN
			countDown() {
				var that = this;
				if (that.index1 == 1) {
					that.ctx.beginPath()
					that.ctx.arc(that.center, that.center, that.center - 5, 0, 2 * Math.PI)
					that.ctx.strokeStyle = that.color
					that.ctx.lineWidth = that.lineWidth/2 
					that.ctx.stroke()
				}
				// console.log(this.index)
				that.times = setInterval(() => {
					that.ctx.beginPath()
					that.ctx.arc(that.center, that.center, that.center - 5, 0, (that.index * that.process) * Math
						.PI)
					that.ctx.strokeStyle = that.bgcolor
					that.ctx.lineWidth = that.lineWidth + 1
					that.ctx.stroke()
					let number = that.index / 10
					that.second1 = that.second - parseInt(number)
					// uni.toast(that.index * that.process)
					// console.log(that.index * that.process)
					if (that.index * that.process >= 2) {
						// console.log(that.index * that.process)
						clearInterval(that.times)
						// return;
						that.$emit('end')
					} else {
						that.index++
					}
				}, 100)
			},
			// #endif

			// #ifdef MP-ALIPAY || MP-TOUTIAO
			countDown() {
				// this.times = setInterval(() => { 

				// 	this.ctx.beginPath()
				// 	// this.ctx.arc(this.center / 2 + 0.4, this.center / 2 + 0.4, this.center / 2, 0, 2 * Math.PI)
				// 	this.ctx.arc(this.center, this.center, this.center, 0, 2 * Math.PI)
				// 	this.ctx.strokeStyle = this.color
				// 	this.ctx.lineWidth = this.lineWidth
				// 	this.ctx.stroke() 

				// 	this.ctx.beginPath()
				// 	// this.ctx.arc(this.center / 2 + 0.4, this.center / 2 + 0.4, this.center / 2, 0, (this.index *
				// 	this.ctx.arc(this.center, this.center, this.center, 0, (this.index *
				// 		this.process) * Math.PI)
				// 	this.ctx.strokeStyle = '#fff'
				// 	this.ctx.lineWidth = this.lineWidth + 1
				// 	this.ctx.stroke()
				// 	this.ctx.draw()
				// 	let number = this.index / 10
				// 	this.second1 = this.second - parseInt(number)
				// 	if (this.index * this.process >= 2) {
				// 		clearInterval(this.times)
				// 		this.$emit('end')
				// 	} else {
				// 		this.index++
				// 	}
				// }, 100)

			},
			// #endif



			refresh() {
				clearInterval(this.times)
				clearInterval(this.time1)
				this.second1 = this.second
				this.index = 1
				this.index1 = 1
				this.pauseStatus = false
				this.countDown()
			},
			pause() {
				if (!this.pauseStatus) {
					clearInterval(this.times)
					this.index1 = this.index
					clearInterval(this.time1)
					this.second_copy = this.second1
					this.second1 = this.second_copy
					this.pauseStatus = true
				}
			},
			play() {
				if (this.pauseStatus) {
					this.countDown()
					this.pauseStatus = false
				}
			}
		}
	}
</script>
<style scoped>
	.zhuan {
		transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
	}

	.flex {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.second {
		position: absolute;
		bottom: -58rpx;
		background: #F1C75E;
		padding: 7rpx 10rpx;
		border-radius: 12rpx;
		
	}
	.txt{
		font-size: 22rpx;
		font-weight: 100;
		color: #000000;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.count-num {
		font-size: 40upx;
		width: 60%;
		height: 60%;
		display: block;
		padding: 20%;
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
